<template>
  <div class="index-content">
    <div class="row">
      <div style="flex-grow: 1">
        <div style="margin-left: 20px">
          <div class="row lr">
            <div class="row">
              <el-input palceholder="搜索监测点" prefix-icon="el-icon-search">
                <template slot="append">
                  <el-select>
                    <el-option> 1 </el-option>
                  </el-select>
                </template>
              </el-input>
            </div>
            <div>
              <el-date-picker
                style="width: 120px"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
          <div>
            <el-card class="index-card">
              <div class="index-title">温度</div>
              <div class="index-chart" id="chart1"></div>
            </el-card>

            <el-card class="index-card">
              <div class="index-title">湿度</div>
              <div class="index-chart" id="chart2"></div>
            </el-card>

            <el-card class="index-card">
              <div class="index-title">预警信息</div>
              <el-table>
                  
              </el-table>
            </el-card>
          </div>
        </div>
      </div>

      <div style="width: 500px">
        <div style="background-color: #fff; padding: 40px; margin-left: 20px">
          <div>
            <div class="row lr index-title">
              <div>xx项目-x区-xKM-xx监测点</div>
              <div><i class="el-icon-setting"></i></div>
            </div>
            <div class="row lr">
              <div class="index-tag"></div>
              <div class="index-tag"></div>
              <div class="index-tag"></div>
              <div class="index-tag"></div>
            </div>
          </div>
          <div>
            <div>
              <date-show @click="getDate"></date-show>
            </div>
            <div style="margin-top: 20px; height: 150px">
              <div class="card-info">
                <div class="card-content">
                  <div class="card-info-tag">良</div>
                  <div>
                    <div class="card-info-title">生长环境良好</div>
                    <div class="card-info-describe">
                      风调雨顺，近3日无异常情况~
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="index-title">项目监测点列表</div>
            <div class="project-list">
              <div v-for="(item,index) in projectList" :key="index" :class="index==projectActiveIndex?'project-list-item active':'project-list-item' " @click="selectProjectItem(index)">
                {{item.title}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DateShow from "./DateShow/DateShow.vue";
import * as echarts from "echarts";

export default {
  name: "Index",
  components: {
    DateShow,
  },
  data() {
    return {
      chart1: null,
      chart2: null,
      projectList:[],
      projectActiveIndex:0,
    };
  },
  methods: {
    initChart1() {
      let chart1 = document.getElementById("chart1");
      this.chart1 = echarts.init(chart1);
      let x=[]
      let y=[]
      for(let i=0;i<=24;i+=2){
          x.push(i+'点')
          y.push(Math.random(1,20)*20)
      }
      let option = {
        xAxis: {
          type: "category",
          data: x,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: y,
            type: "line",
          },
        ],
      }
      option && this.chart1.setOption(option)
    },
    initChart2() {
      let chart2 = document.getElementById("chart2");
      this.chart2= echarts.init(chart2);
      let x=[]
      let y=[]
      for(let i=0;i<=24;i+=2){
          x.push(i+'点')
          y.push(Math.random(1,20)*20)
      }
      let option = {
        xAxis: {
          type: "category",
          data: x,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: y,
            type: "line",
          },
        ],
      }
      option && this.chart2.setOption(option)
    },
    selectProjectItem(index){
      this.projectActiveIndex=index
    },
    getDate(d) {
      console.log(d);
    },
  },
  mounted() {
      this.initChart1()
      this.initChart2()

      this.projectList=[{
        id:1,
        title:'xx项目-x区-xKM-xx监测点'
      },{
        id:2,
        title:'xx项目-x区-xKM-xx监测点'
      },{
        id:3,
        title:'xx项目-x区-xKM-xx监测点'
      }]
  },
};
</script>

<style>
.index-content {
  margin: 0;
  padding: 20px;
  background-color: #f6f6fc;
  width: 100%;
  height: 100%;
}

.index-title {
  
  font-size: 14px;
  font-weight: 700;
}
.index-tag {
  width: 40px;
  height: 50px;
  border: #f1f1fc solid 1px;
  border-radius: 5px;
}
.index-card {
  margin-top: 20px;
  padding: 5px;
}
.index-chart {
  width: 100%;
  height: 280px;
  margin: 0;
  padding: 0;
}
.project-list {
  background-color: #f0f8ff;
  padding: 20px;
  border: solid 1px #f0f8ff;
  border-radius: 10px;
  margin-top: 20px;
}

.project-list-item {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  margin: 5px;
  border: #f1f1fc solid 1px;
  border-radius: 10px;
  cursor: pointer;
}

.project-list .active {
  background-color: #64b5f6;
  color: #fff;
}

.card-info {
  height: 70px;
  width: 330px;
  padding: 10px;
  border-radius: 25px;
  background-color: #63c527;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

.card-content {
  line-height: 70px;
  display: flex;
}
.card-info-tag {
  display: inline-block;
  width: 50px;
  padding: 0 30px;
  font-size: 36px;
  font-weight: bold;
  color: #fff;
}

.card-info-title {
  line-height: 40px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}

.card-info-describe {
  line-height: 30px;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.884);
}
</style>